<template>
	<div class="container">
		<div class="jx-return-container">
      <i class="iconfont icon-back" @click="back"></i><span class="cube-title">产品详情</span>
    </div>
    <div class="jx-detail">
      <div class="detail-item">
        <div class="item_2 item">
          <div class="title">
            基本信息
          </div>
          <div class="list">
            <span>上架时间：</span>
            <div class="right">
              <span>{{productDetail.shopProductUpAt || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>商家店铺：</span>
            <div class="right">
              <span>
                {{productDetail.shopName || '--'}}
              </span>
            </div>
          </div>
          <div class="list">
            <span>产品类型：</span>
            <div class="right">
              <span>{{productDetail.shopProductCatalog || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>产品分类：</span>
            <div class="right">
              <span>{{productDetail.catalogName || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>产品名称：</span>
            <div class="right">
              <span>{{productDetail.shopProductName || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>副标题：</span>
            <div class="right">
              <span>{{productDetail.shopProductNameSecond || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>服务类型：</span>
            <div class="right">
              <span>{{productDetail.shopProductServiceMode || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>适用车系：</span>
            <div class="right">
              <span>{{productDetail.suitCarSeries || '--'}}</span>
            </div>
          </div>
        </div>
        <div class="item_2 item">
          <div class="title">产品图片</div>
          <div class="list">
            <span>产品主图：</span>
            <div class="right">
              <img class="pic" :src="productDetail.shopProductImgUrl"/> 
            </div>
          </div>
          <div class="title" style="margin-top: 35px;">产品说明</div>
          <div class="list">
            <div class="right">{{productDetail.shopProductDesc || '--'}}</div>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item">
          <div class="title">
            产品信息
          </div>
          <div class="jx-table jx-table1" style="padding: 0;">
            <el-table :data="productDetail.details" border style="width: 100%" v-loading="boo.loading">
              <el-table-column type="index" label="序列" width="60" align="center">
              </el-table-column>
              <el-table-column prop="shopProductDetailName" label="产品名称" width="150" align="center">
              </el-table-column>
              <el-table-column prop="shopProductDetailImgUrl" label="产品主图" width="150" align="center">
                <template slot-scope="scope">
                  <img class="logo" :src="scope.row.shopProductDetailImgUrl"/>
                </template>
              </el-table-column>
              <el-table-column prop="shopProductDetailSpec" label="产品规格" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="shopProductDetailPrice" label="价格"  align="center" :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item">
          <div class="title">上门服务</div>
          <div class="list">
            <span>是否收费：</span>
            <div class="right">
              <span>{{(productDetail.isDoorDoorService || '--') ? '是' : '否'}}</span>
            </div>
          </div>
          <div class="list">
            <span>收费标准：</span>
            <div class="right">
              <div class="jx-table" style="padding: 0;">
                <el-table :data="productDetail.charges" border style="width: 100%" v-loading="boo.loading">
                  <el-table-column type="index" label="序列" width="60" align="center">
                  </el-table-column>
                  <el-table-column prop="item1" label="公里数" width="150" align="center">
                    <template slot-scope="scope">
                      {{scope.row.kilometreUpper}}-{{scope.row.kilometreLower}}公里
                    </template>
                  </el-table-column>
                  <el-table-column prop="charge" label="收费情况" width="120" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="chargeDesc" label="描述"  width="250" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="list">
            <span>上门服务须知：</span>
            <div class="right">
              {{productDetail.shopProductDoorDoorService || '--'}}
            </div>
          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: this.$api.product.shop,
        boo: {
          loading: false,
        },
        productDetail: '',
			}
		},
		mounted(){
      let _self = this
      _self.getDetail()
    },
		methods: {
      back(){
        history.go(-1)
      },
      getDetail(){
        let _self = this
        let params = {
          id: this.$route.query.id,
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.productDetail = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https.detail, params, success) 
      },
      
    }
	}

</script>
<style scoped lang="sass">
  .jx-table1
    /deep/ .el-table__body td
      .cell
        height: auto !important
        line-height: auto !important
        margin-bottom: 0 !important
  .jx-table
    /deep/ .el-table__body td
      .cell
        height: 23px
        line-height: 23px
        margin-bottom: 0 !important
    /deep/ .el-table th>.cell
      margin-bottom: 0 !important
    /deep/ .el-table--small td, .el-table--small th
      padding: 8px 0
</style>
